<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Document</title>
    <style>
      .box1 {
        width: 100px;
        height: 100px;
        background: red;
      }
      .box2 {
        width: 100px;
        height: 100px;
        background: yellow;
      }
      .box3 {
        width: 100px;
        height: 100px;
        background: pink;
      }
    </style>
  </head>
  <body>
    <button>按钮一</button><button>按钮二</button><button>按钮三</button>
    <div class="box1">1</div>
    <div class="box2">2</div>
    <div class="box3">3</div>
    <script>
      // 1.先隐藏所有的div 2.找到 点击btn的 下标 让下标对应的div显示；
      // 一、获取所有的按钮 然后绑定点击事件
      var btns = document.querySelectorAll("button");
      var divs = document.querySelectorAll("div");
      // btns.forEach(function(item,key){
      //     // console.log(item);
      //     item.onclick = function(){
      //         // console.log(key);
      //         // 把所有的div隐藏起来；
      //         divs.forEach(function(val){
      //             val.style.display = "none";
      //         })
      //         // 把点击按钮键名和div键名相同的div显示出来
      //         // console.log(key);
      //         divs[key].style.display = "block";

      //         // 给当前点击的按钮背景颜色；
      //         // console.log(btns[key]);
      //         // console.log(this);
      //         // 去掉所有按钮的背景颜色
      //         btns.forEach(function(btn){
      //             btn.style.background = "";
      //         })

      //         this.style.background = "red";

      //     }
      // })

      // for(let i=0;i<btns.length;i++){
      //     btns[i].onclick = function(){
      //         console.log(i);
      //     }
      // }

      // for(let i=0;i<3;i++){
      //     for(let i=0;i<3;i++){
      //         console.log(i);
      //     }
      // }

      btns.forEach(function (item, key) {
        // console.log(item);
        item.onclick = function () {
          // console.log(key);
          // 把所有的div隐藏起来；
          divs.forEach(function (val, k) {
            if (k == key) {
              // 这个div需要显示
              val.style.display = "block";
            } else {
              val.style.display = "none";
            }
          });
          btns.forEach(function (btn, index) {
            if (index == key) {
              // btns[key].style.background = "red";
              btn.style.background = "red";
            } else {
              btn.style.background = "";
            }
          });
        };
      });
    </script>
  </body>
</html>
